<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 19:41:52
 * @LastEditors: wanlixin
 * @LastEditTime: 2019-10-04 19:41:52
 * @Description: 
 -->
<template>
  <grimm-page type="button-view" title="SearchBar">
    <template slot="content">
      <div disabled>
        <h1 class="example-page-title">基础用法</h1>
        <grimm-searchbar v-model="content1"/>
        <p style="word-break: break-all;">searched：{{content1}}</p>

        <h1 class="example-page-title">安卓搜索</h1>
        <grimm-searchbar
          v-model="content2"
          icon="left"
          placeholder="搜索姓名/手机号/房号/订单号"
          searchBtn="搜索" 
          @search="searchFunc"
          @back="backFunc"
        />
        <p style="word-break: break-all;">searched：{{content2}}</p>

        <h1 class="example-page-title">待输入可取消</h1>
        <grimm-searchbar v-model="content3" placeholder="请输入搜索内容" cancelBtn="取消" @cancel="cancelFunc" empty/>
        <p style="word-break: break-all;">searched：{{content3}}</p>
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from 'example/components/GrimmPage.vue';
export default {
  data() {
    return {
      content1: '',
      content2: '',
      content3: '',
      optionValue: {
        label: 'Option Checkbox',
        value: '1',
      },
    };
  },
  methods: {
    onChangeBefore(vals) {
      return /^\d{0,}$/.test(vals);
    },
    cancelFunc() {
      console.log('cancel');
    },
    searchFunc() {
      console.log('search');
    },
    backFunc() {
      console.log('back');
    },
  },
  components: {
    GrimmPage,
  },
};
</script>
<style lang="stylus"  scoped>
.example-page-title {
  margin-top: 20px;
}
</style>
